<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/jquery.dad.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.dad.js"></script>
<style>
    /*公司信息*/
    .company {
        width: 1566px;
        margin: 0 auto;
        background-color: #FFFFFF;
        margin-top: 20px;
        border-radius: 3px;

    }

    .tit {
        width: 1526px;
        height: 68px;
        margin: 0 auto;

        border-bottom: 1px solid #979797;
        line-height: 68px;
        font-size: 20px;
        color: #003A94;
        letter-spacing: 2px;
        font-weight: bold;
        margin-bottom: 20px;

    }

    .text button {
        margin-top: 100px;

    }

    .btn {
        float: right;
    }

    .button {
        clear: both;

    }

    .table {
        /*border-bottom: 1px solid #FFFFFF;*/
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.10);
        text-align: center;
        margin-top: -10px;
        line-height: 60px;
    }

    .pho {
        width: 30px;
        height: 30px;
        background-color: #979797;
        border-radius: 90px;
        display: inline-block;
        line-height: 30px;

    }

    .pho .iconshuxie {

        line-height: 30px;

    }

    .pho .iconlajitong {
        line-height: 30px;
    }

    .table {
        display: table;
        border-style: none;
        position: relative;
        top: 0;
        clear: both;
        border-collapse: collapse;
    }

    .table-row-group {
        display: table-row-group;

    }

    .table-row .table-cell {
        /*background-color: blue;*/
        width: 1566px;
        /*background-color: red;*/
        text-align: center;
    }

    .table-row-group .table-row:hover, .table-footer-group .table-row:hover {
        background: #f6f6f6;
    }

    .table-cell {
        display: table-cell;
        padding: 0 5px;
        border-bottom: 1px solid #DCDCDC;
        height: 60px;
    }

    .table-header-group .table-row .table-cell {
        font-size: 16px;

    }

    .tabtit {
        height: 60px;
        font-weight: bold;

        border: none;

        position: relative;
        top: 0px;
        line-height: 60px;
        border-bottom: 1px solid #DCDCDC;

    }

    .tabtit li:nth-child(1) {
        width: 318px;
        text-align: center;
        display: inline-block;
        float: left;

    }

    .tabtit li:nth-child(2) {
        width: 299px;
        text-align: center;
        float: left;
    }

    .tabtit li:nth-child(3) {
        width: 290px;
        text-align: center;
        float: left;
    }

    .tabtit li:nth-child(4) {
        width: 354px;
        text-align: center;
        float: left;
    }

    .tabtit li:nth-child(5) {
        width: 304px;
        text-align: center;
        float: left;
    }
</style>
<body>
<div class="company">
    <div class="tabtit">
        <li>头像</li>
        <li>人员姓名</li>
        <li>性别</li>
        <li>手机号</li>
        <li>操作</li>
    </div>
    <div class="table ">
        <div class="table-row-group" id="ygdiv">
            <div class="table-row">
                <div class="table-cell draggable"><img src="../img/man.png"></div>
                <div class="table-cell draggable">军事</div>
                <div class="table-cell draggable">男</div>
                <div class="table-cell draggable">17603865171</div>
                <div class="table-cell photo"><span class="pho" onclick="editYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconshuxie"></i></span>&nbsp;&nbsp;<span class="pho"
                                                                                 onclick="deleteYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconlajitong"></i></span></div>
            </div>

            <div class="table-row">
                <div class="table-cell draggable"><img src="../img/man.png"></div>
                <div class="table-cell draggable">颤三</div>
                <div class="table-cell draggable">男</div>
                <div class="table-cell draggable">17603865171</div>
                <div class="table-cell photo"><span class="pho" onclick="editYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconshuxie"></i></span>&nbsp;&nbsp;<span class="pho"
                                                                                 onclick="deleteYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconlajitong"></i></span></div>
            </div>


            <div class="table-row">
                <div class="table-cell draggable"><img src="../img/man.png"></div>
                <div class="table-cell draggable">找死</div>
                <div class="table-cell draggable">男</div>
                <div class="table-cell draggable">17603865171</div>
                <div class="table-cell photo"><span class="pho" onclick="editYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconshuxie"></i></span>&nbsp;&nbsp;<span class="pho"
                                                                                 onclick="deleteYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconlajitong"></i></span></div>
            </div>

            <div class="table-row">
                <div class="table-cell draggable"><img src="../img/man.png"></div>
                <div class="table-cell draggable">王五</div>
                <div class="table-cell draggable">男</div>
                <div class="table-cell draggable">17603865171</div>
                <div class="table-cell photo"><span class="pho" onclick="editYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconshuxie"></i></span>&nbsp;&nbsp;<span class="pho"
                                                                                 onclick="deleteYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconlajitong"></i></span></div>
            </div>

            <div class="table-row">
                <div class="table-cell draggable"><img src="../img/man.png"></div>
                <div class="table-cell draggable">你好</div>
                <div class="table-cell draggable">男</div>
                <div class="table-cell draggable">17603865171</div>
                <div class="table-cell photo"><span class="pho" onclick="editYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconshuxie"></i></span>&nbsp;&nbsp;<span class="pho"
                                                                                 onclick="deleteYg('5ff5a78e4e9242c6b4328e6256247abd')"><i
                        class="iconfont iconlajitong"></i></span></div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    $(function () {
        $('#ygdiv').dad({
            draggable: '.draggable',
            callback: function () {

            }
        });
    });
</script>
</html>